<template>
  <div>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>工艺管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card class="box-card">
      <div align="center" class="d1" style="color: mediumblue">
        <h3>工艺管理界面</h3>
      </div>
      <div class="d2">
        <el-form :model="searchForm" class="demo-form-inline">
          <el-row :gutter="20">
            <el-form-item>
              <el-col :span="5">
                <el-input placeholder="请输入关键字" v-model="searchForm.code"></el-input>
              </el-col>
              <div style="float: right">
                <el-button @click="searchUser" plain type="info">搜索</el-button>
              </div>
            </el-form-item>
          </el-row>
        </el-form>
      </div>

      <el-table
        :data="craftList"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>

        <el-table-column
          label="订单编号"
          prop="code">
        </el-table-column>
        <el-table-column
          label="销售员"
          prop="linkmanName">
        </el-table-column>
        <el-table-column
          label="创建时间">
          <template slot-scope="scope">
            {{scope.row.createDate | datefmt}}
          </template>
        </el-table-column>
        <el-table-column
          label="更新时间">
          <template slot-scope="scope">
            {{scope.row.updateDate | datefmt}}
          </template>
        </el-table-column>
        <el-table-column
          label="订单状态">
          <template slot-scope="scope">
            {{scope.row.state | sFit}}
          </template>
        </el-table-column>
        {{craftList}}
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-col :span="12">
              <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <div>
                    <el-button @click="tj(scope.row.id)" plain type="danger">提交</el-button>
                  </div>
                  <div>
                    <el-button @click="ckCraftList(scope.row.id)" plain type="primary">查看</el-button>
                  </div>
                  <div>
                    <el-button @click="orderRecord(scope.row.id)" plain type="primary">订单记录</el-button>
                  </div>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </template>
        </el-table-column>
      </el-table>
      <div align="center">
        <el-pagination
          :current-page="page.pagenum"
          :page-size="page.pagesize"
          :page-sizes="[5, 10, 20, 40]"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>

    </el-card>
    <el-dialog :close-on-click-modal="false" :visible.sync="orderRecordVisible">
      <el-table
        :data="orderRecordList"
        style="width: 100%">
        <el-table-column
          prop="userName"
          label="操作人姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="updatetime"
          label="操作时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="remarks"
          label="操作说明">
        </el-table-column>
      </el-table>
      <div class="dialog-footer" slot="footer">
        <el-button @click="orderRecordVisible = false">取 消</el-button>
      </div>

    </el-dialog>
  </div>

</template>

<script>

  export default {
    name: "craftList",
    data() {
      return {
        craftList: [],
        page: {
          pagenum: 0,
          pagesize: 5
        },
        total: 0,
        searchForm: {code: ""},
        nowUser: {},
        orderRecordVisible: false,
        orderRecordList:[]
      }
    },
    methods: {
      orderRecord: function (id) {
        this.$http.get("/order/orderRecord/" + id).then((res) => {
          this.orderRecordList = res.data.result
          if (res.data.success) {
            this.orderRecordVisible = true
            this.$message({
              message: res.data.message,
              type: 'success'
            });
          } else {
            this.$message.error(res.data.message);
          }

        })
      },
      ckCraftList: function (id) {
        this.$router.push({path: '/ckCraftList', query: {id}});
      },
      tj: function (id) {
        this.$http.post("/orderprocess/tjCraft/" + id, this.nowUser).then((res) => {
          if (res.data.success) {
            this.$message({message: res.data.message, type: 'success'});
          } else {
            this.$message.error(res.data.message);
          }
          this.searchUser();
        });
      },
      searchUser: function () {//用户列表
        this.$http.post("/orderprocess/list/" + this.page.pagenum + "/" + this.page.pagesize, this.searchForm).then((res) => {
          this.craftList = res.data.result.list;
          this.total = res.data.result.total;
        });
      },
      handleSizeChange: function (val) {
        this.page.pagesize = val;
        this.searchUser();
      },
      handleCurrentChange: function (val) {
        this.page.pagenum = val;
        this.searchUser();
      },
    },
    filters: {
      sFit: function (val) {
        if (val == 1) {
          return "已提交"
        }
      },
    },
    mounted() {
      this.searchUser();//获取列表
      this.nowUser = JSON.parse(sessionStorage.getItem("user"))
    }
  }
</script>

<style scoped>
  .d1 {
    border-bottom: 1px solid #333744;
  }

  .d2 {
    margin: 20px
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
